module

该参数主要用来设置规则来调用loader。考虑到1.x和2.x版本参数配置差异较大，而且2.x为了兼容保留了很多1.x的写法。

很对参数属性的值可以是字符串、正则、函数、数组、对象，因为函数用的比较少，所以以下不做介绍。

module.noParse：RegExp | [RegExp] | function

传递一个正则、数组正则、或函数(接收一个参数，返回布尔值)，被匹配的文件则不会被loader处理，而是直接打包输出，同时这些文件不应该包含如import、require、define等引入机制，否则会报错。

针对没有 AMD/CommonJS 的源代码，并且引入dist文件的话，那么可以使用noParse选项。

这样webpack会直接引入这个文件，而不会进行额外的压缩打包。（文件内容还是会存在于打包好的文件中。）

其实这么做并不会改变bundle文件的大小，只是打包会更快一点而已。

例如：

//新建一个print.js文件
import $ from 'jquery';
export default function(){console.log('print')}

//webpack.config.js 文件片段
noParse:/print/

这样打包，webpack并不会处理import，而是直接打包到bundle，可以提升打包速度，但是浏览器无法识别import，自然报错。

module.rules：Array

定义一些列规则，这些规则可以修改模块的创建方式，可以将加载器应用于模块，或修改解析器。比如处理less、sass、jsx等。

规则分为三部分：条件、结果、嵌套规则。

rule.test：RegExp | Array

传递一个正则或数组正则，对匹配到的文件应用loader。

//对项目下的js文件进行babel处理
module:{
    rules:[
        {
            test:/\.js$/,  //或 [/\.js$/]
            loader:'babel-loader'
        }
    ]
}

rule.include：RegExp | Array

传递一个正则或数组正则，一般用来匹配文件夹，对匹配到的文件应用loader。

//对src目录下的js文件进行babel处理
module:{
    rules:[
        {
            test:/\.js$/,  //或 [/\.js$/]
            include:/src/, //或 [/src/]
            loader:'babel-loader'
        }
    ]
}

rule.exclude：RegExp | Array

传递一个正则或数组正则，功能和include正好相反，对匹配到的文件不应用loader。

//对非src目录下的js文件进行babel处理
module:{
    rules:[
        {
            test:/\.js$/,  //或 [/\.js$/]
            exclude:/src/, //或 [/src/]
            loader:'babel-loader'
        }
    ]
}

rule.loader：String | Array

传递一个字符串或数组字符串，配置loader队列。

//为css文件配置style-loader和css-loader
module:{
    rules:[
        {
            test:/\.css$/,
            loader:'style-loader!css-loader' //等价于 ['style-loader','css-loader']
        }
    ]
}

如果以字符串的形式配置多个loader，要以!分割，同时注意loader的读取顺序是从下到上、从右往左。这里style-loader、css-loader顺序不能写反。

rule.loaders：String | Array（等价于：rule.use）

传递一个字符串或数组字符串或数组对象，配置loader队列。功能等价于rule.use，rule.loader是简写形式。

//字符串形式、数组字符串形式
module:{
    rules:[
        {
            test:/\.css$/,
            loaders:'style-loader!css-loader' //等价于 ['style-loader','css-loader']
        }
    ]
}
//数组对象形式（loader从下到上）
module:{
    rules:[
        {
            test:/\.css$/,
            loaders:[
                {
                    loader:"style-loader" //注意这里只能配置单一loader，所以数组、!形式等写法都是错误的
                },
                {
                    loader:"css-loader"
                }
            ]
        }
    ]
}

数组对象的写法一般是为了对loader配置参数、插件的。比如js文件ES6转ES5：

module:{
    rules:[
        {
            test:/\.js$/,
            loaders:[
                {
                    loader:"babel-loader",
                    options:{
                        presets:['latest']
                    }
                }
            ]
        }
    ]
}

rule.oneOf：Array

传递一个数组对象，为不同的参数匹配不同的loader。

module:{
    rules:[
        {
            test:/\.js$/,
            oneOf:[
                {
                    resourceQuery:/es6/,
                    use:'babel-loader' //可以用loader、loaders、use，规则如上
                },
                {
                    resourceQuery:/es5/,
                    use:[
                        {
                            loader:"babel-loader",
                            options:{
                                presets:['latest']
                            }
                        }
                    ]
                }
            ]
        }
    ]
}
//引入js文件：
import fn from './index.js?es5'; //该文件resourceQuery就是es5，所以应用oneOf[1]的规则

可以看出像loader、loaders、use是可以嵌套的，这样几乎可以满足一切复杂的需求。

rule.resourceQuery：RegExp

参考上例子。同时rule.resource的配置项基本也就是test、include、exclude等，可以忽略。

module属性主要功能集中在rules上，常用的就是test、exclude、include、oneOf、use等，还有一些特别的属性，比较冷门也比较复杂，暂不研究。